
import React, { createRef } from 'react'
import router from 'umi/router'
import { List, InputItem, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import styles from './index.scss'

const index = ({ form: { getFieldProps, validateFields } }) => {
  const phoneNumber = createRef()
  const password = createRef()

  const loginIn = () => {
    validateFields((errs, values) => {
      if(errs) return
      console.log('values', values)
      router.replace('/')
    })
  }

  return (
    <div className={styles.login}>
      <List renderHeader={() => '请输入用户信息以登陆'}>
        <InputItem
          {...getFieldProps('autofocus')}
          clear
          type='number'
          placeholder='请输入手机号'
          ref={phoneNumber}
        >手机号</InputItem>
        <InputItem
          {...getFieldProps('focus')}
          clear
          autoComplete='new-password'
          type="password"
          placeholder='请输入密码'
          ref={password}
        >密码</InputItem>
      </List>
      <Button className={styles.btn} type='primary' onClick={loginIn}>登陆</Button>
    </div>
  )
}

const BasicInputExampleWrapper = createForm()(index)

export default BasicInputExampleWrapper
